<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="style.css"/>
</head>
<body>
	<header>
		<nav>
			<div class="logo">
				<img src="images/学成网logo_03.png" alt="">
			</div> 
			<!-- 导航栏部分 -->
			<div class="navbar">
				<ul>
					<li><a href="">首页</a></li>
					<li><a href="">课程</a></li>
					<li><a href="">职业规划</a></li>
				</ul>
			</div>
			<!-- 个人中心部分 -->
			<div class="personal">
				<a href="#">个人中心 </a>
				<a href="#"><img src="images/学成网首页_03.png" >希禾</a>
			</div>
			<!-- 搜索框部分 -->
			<div class="search">
				<form action="">
					<input type="text" placeholder="请输入关键词">
					<input type="submit" value="" >
				</form> 
			</div>
			
		</nav>
	</header>
	<!-- banner部分 -->
	<div class="banner">
		<div class="banner-in container">
			<!-- 左侧导航栏 -->
			<div class="slidebar">
				<ul>
					<li><a href="#">前端开发 <span>></span></a></li>
					<li><a href="#">后端开发 <span>></span></a></li>
					<li><a href="#">移动开发 <span>></span></a></li>
					<li><a href="#">人工智能 <span>></span></a></li>
					<li><a href="#">商业预测 <span>></span></a></li>
					<li><a href="#">云计算&大数据 <span>></span></a></li>
					<li><a href="#">运维&从测试 <span>></span></a></li>
					<li><a href="#">UI设计 <span>></span></a></li>
					<li><a href="#">产品 <span>></span></a></li>
				</ul>
			</div>

			<!-- 小课表部分 -->
			<dl class="timetable">
				<dt>我的课程表</dt>
				<dd>
					<h4>继续学习 程序语言设计</h4>
					<p>正在学习-使用对象</p>
				</dd>
				<dd>
					<h4>继续学习 程序语言设计</h4>
					<p>正在学习-使用对象</p>	
				</dd>
				<dd>
					<h4>继续学习 程序语言设计</h4>
					<p>正在学习-使用对象</p>
				</dd>
				<dd>
					<a href="">全部课程</a>
				</dd>
			</dl>
			<ui class="circle">
				<li class="current"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ui>
		</div>
	</div>

	<div class="recommend container">
		<a href="#">精品推荐</a>
		<a href="#">Jquery</a>
		<a href="#">Spart</a>
		<a href="#">Mysql</a>
		<a href="#">JavaWeb</a>
		<a href="#">Mysql</a>
		<a href="#">Javaweb</a>
		<a href="#">修改兴趣</a>
	</div>
	<!-- 精品推荐大模块 -->
	<div class="recom-products container">
		<div class="recom-hd"><!-- 精品推荐头部 -->
			<h4>精品推荐</h4>
			<a href="#">查看全部</a>
		</div>
		<div class="recom-bd clearfix"><!-- 精品推荐主体 -->
			<ul>
				<li>
					<img src="images/1_04.png" alt="">	
					<h5>Think PHP 5.0 博客系统实战项目演练</h5>
					<p><span>高级</span> . 1125人在学习</p>
				</li>
				<li>
					<img src="images/1_04.png" alt="">	
					<h5>Think PHP 5.0 博客系统实战项目演练</h5>
					<p><span>高级</span> . 1125人在学习</p>
				</li>
				<li>
					<img src="images/1_04.png" alt="">	
					<h5>Think PHP 5.0 博客系统实战项目演练</h5>
					<p><span>高级</span> . 1125人在学习</p>
				</li>
				<li>
					<img src="images/1_04.png" alt="">	
					<h5>Think PHP 5.0 博客系统实战项目演练</h5>
					<p><span>高级</span> . 1125人在学习</p>
				</li>
				<li>
					<img src="images/1_04.png" alt="">	
					<h5>Think PHP 5.0 博客系统实战项目演练</h5>
					<p><span>高级</span> . 1125人在学习</p>
				</li>
				<li>
					<img src="images/1_04.png" alt="">	
					<h5>Think PHP 5.0 博客系统实战项目演练</h5>
					<p><span>高级</span> . 1125人在学习</p>
				</li>
				<li>
					<img src="images/1_04.png" alt="">	
					<h5>Think PHP 5.0 博客系统实战项目演练</h5>
					<p><span>高级</span> . 1125人在学习</p>
				</li>
				<li>
					<img src="images/1_04.png" alt="">	
					<h5>Think PHP 5.0 博客系统实战项目演练</h5>
					<p><span>高级</span> . 1125人在学习</p>
				</li>
				<li>
					<img src="images/1_04.png" alt="">	
					<h5>Think PHP 5.0 博客系统实战项目演练</h5>
					<p><span>高级</span> . 1125人在学习</p>
				</li>
				<li>
					<img src="images/1_04.png" alt="">	
					<h5>Think PHP 5.0 博客系统实战项目演练</h5>
					<p><span>高级</span> . 1125人在学习</p>
				</li>
			</ul>	
		</div>
	</div>
	<!--页面底部分-->
	<footer>
		<div class="container footer-in">
			<div class="footer-l">
				<img src="images/学成网logo_03.png" alt="">
				<p>文字</p>
				<a href="#">下载app</a>
			</div>
			<div class="footer-r">
				<dl>
					<dt>关于学成网</dt>
					<dd><a href="#"></a>关于</dd>
					<dd><a href="#"></a>管理团队</dd>
					<dd><a href="#"></a>工作机会</dd>
					<dd><a href="#"></a>客户服务</dd>
					<dd><a href="#"></a>帮助</dd>	
				</dl>
				<dl>
					<dt>关于学成网</dt>
					<dd><a href="#"></a>关于</dd>
					<dd><a href="#"></a>管理团队</dd>
					<dd><a href="#"></a>工作机会</dd>
					<dd><a href="#"></a>客户服务</dd>
					<dd><a href="#"></a>帮助</dd>	
				</dl>
				<dl>
					<dt>关于学成网</dt>
					<dd><a href="#"></a>关于</dd>
					<dd><a href="#"></a>管理团队</dd>
					<dd><a href="#"></a>工作机会</dd>
					<dd><a href="#"></a>客户服务</dd>
					<dd><a href="#"></a>帮助</dd>	
				</dl>
			</div>
		</div>
	</footer>
</body>
</html>